<template>
  <div class="manager">
    <div class="top">
      <img src="../assets/images/cz1.png" alt="" @click="toIndex" />
    </div>
    <div class="center">
      <div class="title">邀请好友开通合约账号</div>
      <p>
        您的返佣比例 <span>{{ value1 }}%</span> 好友返现比例
        <span>{{ value2 }}%</span>
      </p>
      <van-button type="info" class="button" @click="diaLong"
        >立即邀请</van-button
      >
      <div class="img">
        <img src="../assets/images/jjr1.png" alt="" class="img1" />
        <img src="../assets/images/jjr2.png" alt="" class="img2" />
        <img src="../assets/images/jjr3.png" alt="" class="img3" />
        <img src="../assets/images/jjr4.png" alt="" class="img4" />
      </div>
    </div>
    <div class="btn">
      <button class="btn_anniuOne">返佣数据</button>
      <button class="btn_anniuTwo" @click="goRules">具体规则</button>
    </div>
    <div class="content">
      <van-tabs v-model="active">
        <van-tab title="昨日">
          <div class="lista">
            <p>总佣金预估</p>
            <p>好友交易量（USDT）</p>
          </div>
          <div class="listb">
            <p>400 USDT</p>
            <p>1000 USDT</p>
          </div>
          <div class="listc">
            <p>已经交易的好友数量</p>
            <p>好友详情</p>
          </div>
          <div class="listd">
            <p class="p1">10</p>
            <p class="p2" @click="showPopup">查看详情</p>
          </div>
          <div class="liste">
            <p>我的UID</p>
            <p>返佣历史</p>
          </div>
          <div class="listd">
            <p class="p1">10961481</p>
            <p class="p2" @click="showHistory">查看详情</p>
          </div>
        </van-tab>
        <van-tab title="本月">内容 2</van-tab>
        <van-tab title="所有">内容 3</van-tab>
      </van-tabs>
    </div>
    <van-dialog v-model="show" class="dialog">
      <div class="dia-title">
        <p>邀请好友，赚取佣金！</p>
        <img src="../assets/images/managerx.png" alt="" @click="noShow" />
      </div>
      <div class="dia-Lj">复制链接</div>
      <div class="dia-name">
        <p>{{ num1 }}</p>
        <img
          src="../assets/images/managerFZ.png"
          alt=""
          @click="copyLink(num1)"
        />
      </div>
      <div class="dia-Lj">复制邀请码</div>
      <div class="dia-name">
        <p>{{ num2 }}</p>
        <img
          src="../assets/images/managerFZ.png"
          alt=""
          @click="copyLink(num2)"
        />
      </div>
      <div class="dia-centent">
        <p>您的基础返佣比例：</p>
        <span>{{ num }}</span>
      </div>
      <van-slider class="sliderhua" v-model="valuehua1" active-color="#8992AE">
        <template #button>
          <div class="custom-button">
            {{ parseInt(valuehua1 * parseInt(num) * 0.01) }}%
          </div>
          <img src="../assets/images/stepa.png" />
        </template>
      </van-slider>
      <div class="slhtu">
        <div>
          <img
            @click="valuehua1 = 0"
            :src="
              valuehua1 >= 0
                ? require('../assets/images/stepa.png')
                : require('../assets/images/step.png')
            "
            alt=""
          />
        </div>
        <div>
          <img
            @click="valuehua1 = 25"
            :src="
              valuehua1 >= 25
                ? require('../assets/images/stepa.png')
                : require('../assets/images/step.png')
            "
            alt=""
          />
        </div>
        <div>
          <img
            @click="valuehua1 = 50"
            :src="
              valuehua1 >= 50
                ? require('../assets/images/stepa.png')
                : require('../assets/images/step.png')
            "
            alt=""
          />
        </div>
        <div>
          <img
            @click="valuehua1 = 75"
            :src="
              valuehua1 >= 75
                ? require('../assets/images/stepa.png')
                : require('../assets/images/step.png')
            "
            alt=""
          />
        </div>
        <div>
          <img
            @click="valuehua1 = 100"
            :src="
              valuehua1 >= 100
                ? require('../assets/images/stepa.png')
                : require('../assets/images/step.png')
            "
            alt=""
          />
        </div>
      </div>
      <div class="dia-share">
        <p>
          我的<span>{{ myValue }}%</span>
        </p>
        <p>
          好友<span>{{ peopleValue }}%</span>
        </p>
      </div>
      <van-button type="info" class="dia-button" @click="confirm"
        >确认</van-button
      >
    </van-dialog>
    <van-popup
      v-model="showpop"
      position="bottom"
      :style="{ height: '410px' }"
      closeable
      class="van-popup"
    >
      <van-tabs v-model="activeSmall">
        <van-tab title="好友列表（4）">
          <div class="tab-content" v-for="tab in tabs" :key="tab.id">
            <div class="tab-a">
              <p class="p1">UID</p>
              <p class="p2">dgyrchjurej</p>
            </div>
            <div class="tab-b">
              <p class="p1">充值金额</p>
              <p class="p2">0.00 USDT</p>
            </div>
            <div class="tab-b">
              <p class="p1">产生手续费</p>
              <p class="p2">0.00 USDT</p>
            </div>
            <div class="tab-b">
              <p class="p1">盈亏情况</p>
              <p class="p2">0.00 USDT</p>
            </div>
            <div class="tab-c">
              <p class="p1">邀请时间</p>
              <p class="p2">2022-7-7 19:06</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="返佣历史">
          <div class="history-a">
            <p>+100.58 USDT</p>
          </div>
          <div class="history-b">
            <p>2022-7-7 18:06</p>
          </div>
        </van-tab>
      </van-tabs>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      show: false,
      showpop: false,
      activeSmall: 0,
      tabs: [{}, {}, {}, {}],
      valuehua1: 0,
      num: '40%',
      num1: 'https://www.zxfv.ninja/zh-CN/futures',
      num2: '179240518',
      value1: '20',
      value2: '20',
    }
  },
  methods: {
    diaLong () {
      this.show = true
    },
    toIndex () {
      this.$router.push('/index')
    },
    noShow () {
      this.show = false
    },
    showPopup () {
      this.showpop = true
      this.activeSmall = 0
    },
    showHistory () {
      this.showpop = true
      this.activeSmall = 1
    },
    goRules () {
      this.$router.push('/rules')
    },
    confirm () {
      this.show = false
      this.value1 = this.myValue
      this.value2 = this.peopleValue
    },
    copyLink (val) { // 复制链接  val 就是你需要复制的链接
      this.$copyText(val).then(() => {
        this.$toast(this.$t('common.fuzhicheng'))
      }, () => {
        this.$toast(this.$t('common.fuzhishi'))
      })
    },
  },
  computed: {
    peopleValue: function () {
      return parseInt(this.valuehua1 * parseInt(this.num) * .01)
    },
    myValue: function () {
      return parseInt(parseInt(this.num) - this.valuehua1 * parseInt(this.num) * .01)
    },
  }
}
</script>

<style scoped lang="scss">
.manager {
  margin: 0;
  padding: 0;
  .top {
    height: 11.73vw;
    width: 100vw;
    background-color: #171A2B;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      height: 5.3vw;
      width: 5.3vw;
      margin-left: 2.4vw;
    }
  }
  .center {
    width: 99.73vw;
    height: 153.06vw;
    background: url(../assets/images/jjr.png);
    background-color: #171A2B;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      height: 9.6vw;
      color: rgba(255, 255, 255, 100);
      font-size: 6.66vw;
      font-family: PingFangSC-regular;
      position: relative;
      top: 8.8vw;
      letter-spacing: 0.2vw;
    }
    p {
      height: 5.33vw;
      color: rgba(153, 153, 153, 100);
      font-size: 3.73vw;
      font-family: PingFangSC-regular;
      position: relative;
      top: 12.26vw;
      letter-spacing: 0.2vw;
      span {
        color: rgba(255, 255, 255, 100);
      }
    }
    .button {
      width: 60.8vw;
      height: 9.6vw;
      border-radius: 1.33vw;
      color: rgba(255, 255, 255, 100);
      font-size: 3.73vw;
      //font-family: Arial;
      position: relative;
      top: 26.66vw;
    }
    .img {
      display: flex;
      flex-direction: row;
      width: 93.06vw;
      height: 53.33vw;
      position: relative;
      top: 42.66vw;
    }
    .img1 {
      width: 26.66vw;
      height: 26.66vw;
      position: relative;
      top: 20vw;
      text-align: left;
    }
    .img2 {
      width: 31.5vw;
      height: 31.5vw;
      position: relative;
      right: 8vw;
    }
    .img3 {
      width: 26.66vw;
      height: 26.66vw;
      position: relative;
      right: 16vw;
      top: 20.8vw;
    }
    .img4 {
      width: 26.66vw;
      height: 26.66vw;
      position: relative;
      right: 18.66vw;
      top: 5.33vw;
    }
  }
  .btn {
    height: 9.06vw;
    background-color: #171A2B;
    text-align: left;
    .btn_anniuTwo {
      color: rgba(255, 255, 255, 100);
      font-size: 3.2vw;
      font-family: PingFangSC-regular;
      background-color: #171A2B;
      width: 38.66vw;
      height: 9.06vw;
      border-width: 0;
      border-radius: 1.3vw;
    }
    .btn_anniuOne {
      margin-left: 3.46vw;
      background-color: rgba(10, 122, 255, 100);
      font-size: 3.2vw;
      font-family: PingFangSC-regular;
      width: 38.66vw;
      height: 9.06vw;
      border-width: 0;
    }
  }
  .content {
    height: 112.26vw;
    background-color: #171A2B;
    padding: 2.6vw 3.46vw 0 3.46vw;
    ::v-deep .van-tab {
      font-size: 3.2vw;
      color: rgba(153, 153, 153, 100);
    }
    ::v-deep .van-tab--active {
      color: rgba(255, 255, 255, 100);
    }
    ::v-deep .van-tabs__wrap {
      background-image: url(../assets/images/border.png);
      background-repeat: no-repeat;
      background-position: center 10.93vw;
      background-size: 100% 0.53vw;
    }
    ::v-deep .van-tabs__nav {
      width: 40vw;
      background-color: #171A2B;
      background-image: url(../assets/images/border.png);
      background-repeat: no-repeat;
      background-position: right 10.93vw;
      background-size: 97% 0.5vw;
    }
    ::v-deep .van-tab__text--ellipsis {
      margin-top: 1.3vw;
      margin-right: 4.26vw;
    }
    ::v-deep .van-tabs__line {
      width: 5.86vw;
      height: 0.5vw;
      bottom: 4.26vw;
      left: -2.6vw;
      background-color: rgba(10, 122, 255, 100);
    }
    .lista {
      height: 10.93vw;
      width: 90.93vw;
      display: flex;
      justify-content: space-between;
      p {
        text-align: left;
        height: 4.53vw;
        width: 45.33vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.2vw;
        position: relative;
        top: 6.4vw;
      }
    }
    .listb {
      height: 12.26vw;
      width: 90.93vw;
      display: flex;
      justify-content: space-between;
      p {
        text-align: left;
        height: 5.86vw;
        width: 45.33vw;
        color: rgba(255, 255, 255, 100);
        font-size: 4.26vw;
        position: relative;
        top: 6.4vw;
      }
    }
    .listc {
      height: 11.73vw;
      width: 90.93vw;
      display: flex;
      justify-content: space-between;
      p {
        text-align: left;
        height: 5.8vw;
        width: 45.33vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.2vw;
        position: relative;
        top: 7.2vw;
      }
    }
    .listd {
      height: 12.26vw;
      width: 90.93vw;
      display: flex;
      justify-content: space-between;
      .p1 {
        text-align: left;
        height: 5.8vw;
        width: 45.33vw;
        color: rgba(255, 255, 255, 100);
        font-size: 4.26vw;
        position: relative;
        top: 6.4vw;
      }
      .p2 {
        text-align: left;
        height: 5.33vw;
        width: 45.33vw;
        color: rgba(245, 213, 90, 100);
        font-size: 3.73vw;
        position: relative;
        top: 6.66vw;
      }
    }
    .liste {
      height: 13.86vw;
      width: 90.93vw;
      display: flex;
      justify-content: space-between;
      p {
        text-align: left;
        height: 4.53vw;
        width: 45.33vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.2vw;
        position: relative;
        top: 9.33vw;
      }
    }
  }
  .dialog {
    width: 93.06vw;
    height: 124.8vw;
    background-color: rgba(45, 47, 59, 100);
    .dia-title {
      height: 16.26vw;
      display: flex;
      width: 82.93vw;
      margin: 0 auto;
      justify-content: space-between;
      p {
        color: rgba(255, 255, 255, 100);
        font-size: 4.26vw;
        height: 5.86vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 7.73vw;
      }
      img {
        width: 6.4vw;
        height: 6.4vw;
        position: relative;
        top: 7.73vw;
      }
    }
    .dia-Lj {
      height: 5.33vw;
      width: 82.93vw;
      display: flex;
      margin: 0 auto;
      margin-top: 5.33vw;
      font-size: 3.73vw;
      color: #f0f0f0;
    }
    .dia-name {
      width: 82.93vw;
      height: 9.6vw;
      line-height: 9.6vw;
      border-radius: 0.8vw 0.8vw 0px 0px;
      background-color: #090A1B;
      //font-family: Arial;
      margin: 0 auto;
      margin-top: 2.66vw;
      display: flex;
      text-align: center;
      justify-content: space-between;
      p {
        height: 5.33vw;
        color: rgba(153, 153, 153, 100);
        font-size: 3.73vw;
        font-family: PingFangSC-regular;
        margin-left: 3.2vw;
      }
      img {
        width: 4.8vw;
        height: 4.8vw;
        margin: 2.13vw 2.66vw 0 0;
      }
    }
    .dia-centent {
      height: 5.33vw;
      width: 82.93vw;
      display: flex;
      margin: 0 auto;
      margin-top: 2.4vw;
      p {
        height: 5.33vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
      }
      span {
        height: 5.33vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
        margin-left: 0.5vw;
      }
    }
    ::v-deep .van-dialog__content {
      width: 93.06vw;
      height: 300vw;
    }
  }
  .van-popup {
    border-radius: 2.66vw 2.66vw 0px 0px;
    background-color: #090A1B;
    ::v-deep .van-tab {
      font-size: 3.73vw;
      color: rgba(153, 153, 153, 100);
      flex: none;
      padding: 0;
      margin-right: 6vw;
      // justify-content: flex-start
    }
    ::v-deep .van-tab__text--ellipsis {
      text-align: left;
    }
    ::v-deep .van-tab--active {
      color: rgba(255, 255, 255, 100);
    }
    ::v-deep .van-tabs__wrap {
      height: 14.66vw;
      margin-left: 17px;
    }
    ::v-deep .van-tabs__nav {
      background-color: #090A1B;
      width: 60vw;
    }
    ::v-deep .van-tabs__line {
      width: 5.86vw;
      height: 0.5vw;
      bottom: 4.26vw;
      // left: -6vw;
      background-color: rgba(10, 122, 255, 100);
    }
    .tab-a {
      height: 9.6vw;
      width: 90.66vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid rgba(76, 77, 86, 100);
      .p1 {
        height: 5.33vw;
        color: rgba(187, 187, 187, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 4.26vw;
        letter-spacing: 0.2vw;
      }
      .p2 {
        height: 3.73vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
        position: relative;
        top: 5.06vw;
        letter-spacing: 0.1vw;
      }
    }
    .tab-b {
      height: 11.73vw;
      width: 90.66vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .p1 {
        height: 5.33vw;
        color: rgba(187, 187, 187, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 6.4vw;
        letter-spacing: 0.2vw;
      }
      .p2 {
        height: 3.73vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
        position: relative;
        top: 8vw;
        letter-spacing: 0.1vw;
      }
    }
    .tab-c {
      height: 20.26vw;
      width: 90.66vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .p1 {
        height: 5.33vw;
        color: rgba(187, 187, 187, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 6.4vw;
        letter-spacing: 0.2vw;
      }
      .p2 {
        height: 3.73vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
        position: relative;
        top: 8vw;
        letter-spacing: 0.1vw;
      }
    }
    .history-a {
      height: 9.06vw;
      width: 90.66vw;
      margin: 0 auto;
      border-top: 1px solid rgba(76, 77, 86, 100);
      p {
        height: 5.33vw;
        color: rgba(234, 236, 248, 100);
        font-size: 3.73vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 3.73vw;
      }
    }
    .history-b {
      height: 6.13vw;
      width: 90.66vw;
      margin: 0 auto;
      p {
        height: 3.73vw;
        color: rgba(153, 153, 153, 100);
        font-size: 2.66vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 2.4vw;
      }
    }
  }
  .sliderhua {
    position: relative;
    width: 79.2vw;
    margin: 14vw auto 5vw;
    ::v-deep .van-slider__button-wrapper {
      top: -320%;
      z-index: 1;
    }
    .custom-button {
      width: 12vw;
      color: #fff;
      font-size: 2.66vw;
      line-height: 4.8vw;
      text-align: center;
      background-color: #8992AE;
      border-radius: 0.5vw;
      position: relative;
      bottom: 1vw;
      overflow: hidden;
    }
    img {
      width: 6.4vw;
      z-index: 100;
    }
  }
  .slhtu {
    width: 95vw;
    height: 0;
    display: flex;
    position: relative;
    top: -7vw;
    left: 5vw;
    > div {
      display: flex;
      flex-direction: column;
      margin-right: 15.8vw;
      align-items: center;
      width: 4vw;
      height: 8vw;
      &:last-child {
        margin-right: 0;
      }
    }
    img {
      width: 4vw;
      margin-bottom: 2.1vw;
    }
    p {
      color: #8992AE;
    }
  }
  ::v-deep .van-slider {
    background-color: #8992AE;
  }
  .dia-share {
    height: 4.53vw;
    width: 82.93vw;
    margin: 0 auto;
    margin-top: 2.13vw;
    display: flex;
    justify-content: space-between;
    p {
      color: rgba(153, 153, 153, 100);
      font-size: 3.2vw;
      text-align: left;
      font-family: PingFangSC-regular;
      span {
        margin-left: 1.6vw;
        color: #dbdcdd;
      }
    }
  }
  .dia-button {
    width: 80vw;
    height: 10.66vw;
    line-height: 5.33vw;
    border-radius: 1.33vw;
    background-color: rgba(10, 122, 255, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 3.73vw;
    text-align: center;
    //font-family: Arial;
    margin-top: 10.66vw;
  }
}
</style>